<template>
    <div>
        <Modal v-model="addModal" label-position="left" :mask-closable="false" width="400" title="新增角色">
            <div style="text-align:center" class="addModal">
                    <Form ref="addForm" :model="addForm" :label-width="80">
                        <FormItem label="选择模块:">
                                <Select v-model="addForm.moduleCode" style="width:240px">
                                    <Option v-for="item in modulesOpt" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                        </FormItem>
                        <FormItem label="选择子模块:">
                                <Select v-model="addForm.menuCode" style="width:240px">
                                    <Option v-for="item in itemOpt" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                        </FormItem>
                        <FormItem label="角色名称:">
                            <Input type="text" style="width: 240px" placeholder="请输入角色名称" v-model="addForm.permissionName" number></Input>
                        </FormItem>
                         <FormItem label="角色Code:">
                            <Input type="text" style="width: 240px" placeholder="请输入角色Code" v-model="addForm.permissionCode" number></Input>
                        </FormItem>
                    </Form>
            </div>
            <div slot="footer">
                <Button type="error" size="large" @click="saveForm">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { addPerApi } from '../../../http/role.api'
    export default {
        name: 'addModal',
        props: {
            itemOpt: {
                type: Array
            }
        },
        data () {
            return {
                addModal: false,
                modulesOpt: [
                    /*{
                    value: this.code,
                    label: this.name
                    }
                    ,*/
                    {
                        value: 'usermgt',
                        label: '用户管理模块'
                    }
                ],
                addForm: {
                    moduleCode: '1',
                    menuCode: '1',
                    permissionName: '',
                    permissionCode: ''
                }
            }
        },
        created() {
        },
        watch: {
            'addModal' (val) {
                console.log(this.itemOpt)
                if (val) this.formInit()
            }
        },
        methods: {
            formInit () {
                this.addForm = {
                    moduleCode: '1',
                    menuCode: '1',
                    permissionName: '',
                    permissionCode: ''
                }
            },
            saveForm () {
                addPerApi(this.addForm).then(suc => {
                    console.log(suc)
                    this.addModal = false
                    this.$emit('emitAddPerSuc')
                }).catch(err => {
                    this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                })
            }
        }
    }
</script>
<style>

</style>
